<template>
    <div>
        <basic-container>
            <li>
                <img class="right_item item_img" :src="'/img/tip/123.png'" alt="" style="width: 84px;">
                <el-tag class="left_item" style="color:black">特征类：代表一个商品的规格集合如：手机<br>特征值：代表一个商品所拥有的特征如：手机的颜色<br>特征量：代表一个商品的特征值所包含的参数如：红色<br>
                </el-tag>
                <el-tag class="left_item">
                    添加特征分类直接点击<font color="black" size="6">+</font>号<br> 增加特征值选中左侧书结构特特征分类后点击<font color="black"
                                                                                                   size="6">+</font>号<br>
                    增加特征量选中左侧书结构特征值后点击<font color="red" size="5">新增</font>
                </el-tag>
            </li>


        </basic-container>
        <basic-container>
            <!--添加Dialog 开始-->
            <el-dialog title="特征值添加" :visible.sync="treeDialogFormVisible" @close='closeDialog'>
                <avue-form ref="featureForm" :option="trueFormOption" v-model="featureForm" @submit="handleSubmit">
                    <template slot-scope="scope" slot="parentId">
                        <el-input name="parentId" v-model="superData.featureName" :readonly="true"></el-input>
                    </template>
                </avue-form>
            </el-dialog>
            <!--树结构添加Dialog 结束-->
            <avue-tabs :option="option" @change="handleChange"></avue-tabs>
            <span v-if="type.prop==='tab1'">
                          <div style="display:flex">
                           <!--树结构开始-->

                        <avue-tree style="width:200px;margin-right:10px;" :data="treeData"
                                   :option="treeOption " @node-click="nodeClick">

           </avue-tree>
                              <!--树结构j结束-->
                        <avue-crud :data="data" :option="tableOption" :page="page"
                                   @current-change="handleCurrentChange"
                                   :table-loading="tableLoading">
                              <template slot-scope="scope" slot="menuLeft">
    <el-button type="danger"
               icon="el-icon-plus"
               size="small"
               plain
               @click.stop="treeDialogFormVisible = true">新增</el-button>
                              </template>
                         <template slot-scope="scope" slot="approveStatus">
                             <el-tag v-if="scope.row.approveStatus === 0"
                                     :type="scope.row.approveStatus === 1 ? 'success' : 'primary'" disable-transitions>未审核</el-tag>
                         <el-tag v-if="scope.row.approveStatus === 1"
                                 :type="scope.row.approveStatus === 1 ? 'success' : 'primary'"
                                 disable-transitions>已审核</el-tag>
                         </template>
        <template slot-scope="props"
                  slot="expand">
          <el-form label-position="left"
                   inline
                   class="demo-table-expand">
            <el-form-item label="名称">
              <span>{{props.row.featureName}}</span>
            </el-form-item>
            <el-form-item label="类型">
              <span>{{props.row.type}}</span>
            </el-form-item>
            <el-form-item label="提交">
              <span>{{ props.row.userId}}</span>
            </el-form-item>
              <el-form-item label="上级">
              <span>{{props.row.parentId}}</span>
            </el-form-item>
          </el-form>
        </template>
        <template slot-scope="scope" slot="menu">
          <el-button type="primary"
                     icon="el-icon-view"
                     size="small"
                     @click.stop="handleView(scope.row,scope.index)">查看</el-button>
          <el-button type="primary"
                     icon="el-icon-edit"
                     size="small"
                     @click.stop="handleEdit(scope.row,scope.index)">编辑</el-button>
          <el-button type="danger"
                     icon="el-icon-delete"
                     size="small"
                     @click.stop="handleDel(scope.row,scope.index)">删除</el-button>
        </template>
                        </avue-crud>
                    </div>
            </span>
            <span v-else-if="type.prop==='tab2'">
                <avue-crud :option="treeTableOption" :data="treeTableData">
                            <template slot-scope="scope" slot="menu">
          <el-button v-if="scope.row.level=='1'" type="success"
                     icon="el-icon-check"
                     size="small"
                     @click.stop="checkSuccess(scope.row.id)"></el-button>
          <el-button v-if="scope.row.level=='1'" type="danger"
                     icon="el-icon-close"
                     size="small"
                     @click.stop="handleEdit(scope.row,scope.index)"></el-button>

        </template>
                </avue-crud>

            </span>


            <!--<template>-->
            <!--<avue-tree style="width:200px;margin-right:10px;padding-top:28px;" :data="treeData" :option="treeOption" @node-click="nodeClick"></avue-tree>-->

            <!--</template>-->
        </basic-container>
    </div>
</template>
<script>
    import {
        featureTreeApply,
        featureTreeClass,
        checkSuccessApply,
        featurePage,
        add
    } from '@/api/store/StoreFeature/StoreFeature';
    import {
        storeFeatureOption,
        treeOption,
        treeTableOption,
        tapOption,
        form,
        featureForm
    } from "@/const/store/StoreFeature/StoreFeatureTableOption.js";
    import {storeFeatureTrueFromOption} from "@/const/store/StoreFeature/StoreFeatureFromItem.js";
    import ElTreeNode from "element-ui/packages/tree/src/tree-node";


    export default {
        components: {ElTreeNode},
        data() {
            return {
                tableOption: storeFeatureOption,
                trueFormOption: storeFeatureTrueFromOption,
                treeOption: treeOption,
                treeTableOption: treeTableOption,
                option: tapOption,
                tableLoading: false,
                treeData: [],
                treeTableData: [],
                allData:[],
                data: [],
                superData: {
                    featureName: '',
                    userId: '',
                    classId: '',
                    type: '',
                    approveStatus: '',
                    pId: '',
                    parentId: '',
                    level: "",
                    id: "-1",
                },
                form: form,
                featureForm: featureForm,
                formLabelWidth: '120px',
                dialogFormVisible: false,
                treeDialogFormVisible: false,
                obj: {},
                type: {},
                page: {
                    total: 10, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 20 //每页显示多少条
                },

            }
        },
        created() {
            this.tableLoading = true;
            this.type = this.option.column[0];
            this.handleList();
        },
        methods: {

            checkSuccess(id){
                this.$confirm('此操作将实时生效并推送到前台商品规格, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    checkSuccessApply(id).then(res => {
                        this.handleList();

                        this.$message({
                            showClose: true,
                            message: "审批成功",
                            type: "success"
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleChange(column) {
                this.type = column
                this.$message.success(JSON.stringify(column))
            },
            handleList() {
                featureTreeClass().then(res => {
                    console.log(res);
                    if(res.data.code==="101"){
                        this.tableLoading = false;

                    }else{
                    this.treeData = res.data.data[0];
                    this.tableLoading = false;
                    this.data = res.data.data[1].records;
                        this.allData=res.data.data[3];
                    this.page = {
                        total: res.data.data[1].total,
                        pageSize: res.data.data[1].size,
                    };
                }});
                featureTreeApply().then(res => {
                    this.treeTableData = res.data.data;

                });
            },
            nodeClick(data) {
                this.allData.forEach(item => {
                    if (item.id === data.id) {
                        this.superData = {
                            featureName: item.featureName,
                            userId: item.userId,
                            classId: item.classId,
                            type: item.type,
                            approveStatus: item.approveStatus,
                            parentId: item.parentId,
                            id: item.id,
                            level: item.level
                        };
                    }
                });
                this.page = {
                    total: 10, //总页数
                    currentPage: 1, //当前页数
                    pageSize: 20 //每页显示多少条
                },
                    this.tableLoading = true;

                featurePage({current: this.page.currentPage, id: data.id}).then(res => {
                    setTimeout(() => {
                        this.data = res.data.data.records;
                        this.page = {
                            total: res.data.data.total,
                            pageSize: res.data.data.size,
                        };
                        this.tableLoading = false;
                    }, 1000);
                });
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.handleList();
            },
            closeDialog() {
                this.superData = {
                    featureName: '',
                    userId: '',
                    classId: '',
                    type: '',
                    approveStatus: '',
                    pId: '',
                    parentId: '',
                    id: "-1",
                    level: "",
                }

            },
            handleSubmit(featureForm) {
                    console.log(this.superData.id === "-1");
                if (this.superData.id === "-1") {this.featureForm.level = 1}
                else if (this.superData.level === 1) {this.featureForm.level = 2}
                else if (this.superData.level === 2) {this.featureForm.level = 3}
                this.featureForm.parentId = this.superData.id;
                this.featureForm.approveStatus = 1;
                this.featureForm.userId = -1;
                add(featureForm).then(res => {
                    this.treeDialogFormVisible = false;
                    this.resetForm();
                    this.$message({
                        showClose: true,
                        message: "添加成功",
                        type: "success"
                    });
                })
            },
            resetForm() {
                this.handleList();
                this.featureForm = {
                    featureName: '',
                    userId: '',
                    classId: '',
                    type: '',
                    approveStatus: '',
                    pId: '',
                    parentId: '',
                    level: "",
                }
            },

        }
    }
</script>
<style lang="scss">
    .el-input-group__append{
        display: none;
    }
    .table-container {
        padding: 8px 10px;
    }

    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 70px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .left_item {
        height: 100%;
        display: inline-block;
        box-sizing: border-box;
        vertical-align: middle;
        margin-left: 20px;
    }

    .right_item {
        width: 40%;
        height: 100%;
        display: inline-block;
        box-sizing: border-box;
        vertical-align: middle;
    }

    .item_img {
        width: 120px;
        height: 109px;
    }

    li {
        padding: 5px 10px;
        width: 100%;
        vertical-align: middle;
        box-sizing: border-box;
        display: block;
    }

</style>
<!--<template>-->
<!--<div>-->
<!--<basic-container>-->
<!--<span style="color:sandybrown">审核列表</span>-->

<!--<avue-tree-table :option="option" >-->
<!--<el-table-column label="特征名称">-->
<!--<template slot-scope="scope">-->
<!--<span style="color:sandybrown">{{scope.row.featureName}}</span>-->
<!--</template>-->
<!--</el-table-column>-->
<!--<el-table-column label="申请店铺">-->
<!--<template slot-scope="scope">-->
<!--<el-popover trigger="hover" placement="top">-->
<!--<p>姓名: {{ scope.row.shopName }}</p>-->
<!--<div slot="reference" class="name-wrapper">-->
<!--<el-tag size="medium">{{ scope.row.shopName }}</el-tag>-->
<!--</div>-->
<!--</el-popover>-->
<!--</template>-->
<!--</el-table-column>-->
<!--<el-table-column label="所属分类">-->
<!--<template slot-scope="scope">-->
<!--<span style="color:sandybrown">{{scope.row.className}}</span>-->
<!--</template>-->
<!--</el-table-column>-->
<!--<el-table-column label="类型">-->
<!--<template slot-scope="scope">-->
<!--<el-tag  v-if="scope.row.type === 1"-->
<!--:type="'info'"-->
<!--disable-transitions>规格</el-tag>-->
<!--<el-tag  v-if="scope.row.type === 0"-->
<!--:type="'info'"-->
<!--disable-transitions>属性</el-tag>-->
<!--</template>-->
<!--</el-table-column>-->
<!--<el-table-column label="级别">-->
<!--<template slot-scope="scope">-->
<!--<span style="color:sandybrown">{{scope.row.level}}</span>-->
<!--</template>-->
<!--</el-table-column>-->
<!--<el-table-column-->
<!--label="状态"-->
<!--width="100"-->
<!--&gt;-->

<!--</el-table-column>-->

<!--<el-table-column label="操作"-->
<!--width="200">-->
<!--<template slot-scope="scope" v-if="(scope.row.approveStatus<1)">-->
<!--<el-button   type="text"-->
<!--@click="checkSuccess(scope.row)">通过</el-button>-->
<!--<el-button type="text"-->
<!--@click="message(scope.row)">拒绝</el-button>-->
<!--</template>-->

<!--</el-table-column>-->
<!--</avue-tree-table>-->
<!--<div style="display:flex">-->
<!--<avue-tree style="width:200px;margin-right:10px;padding-top:28px;" :data="treeData" :option="treeOption" @node-click="nodeClick"></avue-tree>-->
<!--<avue-crud :data="data" :option="option"></avue-crud>-->
<!--</div>-->
<!--</basic-container>-->
<!--</div>-->

<!--</template>-->

<!--<script>-->


<!--export default {-->
<!--name: 'tableAllTree',-->
<!--components: {},-->
<!--data () {-->
<!--return {-->

<!--option: {-->
<!--expandAll: false,-->
<!--index:false,-->
<!--data: {},-->
<!--page:false,-->
<!--align:'center',-->
<!--menuAlign:'center',-->
<!--column:[-->
<!--{-->
<!--label:'姓名',-->
<!--prop:'name'-->
<!--}, {-->
<!--label:'性别',-->
<!--prop:'sex'-->
<!--}-->
<!--]-->
<!--},-->
<!--obj:{},-->
<!--data: [-->
<!--{-->
<!--name:'张三',-->
<!--sex:'男'-->
<!--}, {-->
<!--name:'李四',-->
<!--sex:'女'-->
<!--}, {-->
<!--name:'王五',-->
<!--sex:'女'-->
<!--}, {-->
<!--name:'赵六',-->
<!--sex:'男'-->
<!--}-->
<!--],-->
<!--treeData:[-->
<!--{-->
<!--id:0,-->
<!--label:'一级部门',-->
<!--value:0,-->
<!--children:[-->
<!--{-->
<!--id:1,-->
<!--label:'一级部门1',-->
<!--value:0,-->
<!--},{-->
<!--id:2,-->
<!--label:'一级部门2',-->
<!--value:0,-->
<!--}-->
<!--]-->
<!--},{-->
<!--id:3,-->
<!--label:'二级部门',-->
<!--value:0,-->
<!--children:[-->
<!--{-->
<!--id:4,-->
<!--label:'二级部门1',-->
<!--value:0,-->
<!--},{-->
<!--id:5,-->
<!--label:'二级部门2',-->
<!--value:0,-->
<!--}-->
<!--]-->
<!--}-->
<!--],-->
<!--treeOption:{-->
<!--nodeKey:'id',-->
<!--props:{-->
<!--labelText:'标题',-->
<!--label:'label',-->
<!--value:'value',-->
<!--children:'children'-->
<!--}-->
<!--}-->
<!--}-->
<!--},-->

<!--methods: {-->

<!--/**-->
<!--* @title 审核通过-->
<!--* @detail 调用接口修改后台数据状态-->
<!--*-->
<!--**/-->

<!--/**-->
<!--* @title 获取数据-->
<!--* @detail 赋值为tableData表格即可-->
<!--*-->
<!--**/-->


<!--}-->
<!--}-->
<!--</script>-->
